<template>
  <div class="show-info">
    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="姓名:">
    <el-input v-model="form.userName"></el-input>
  </el-form-item>
  <el-form-item label="性别:">
    <el-radio-group v-model="form.gender">
      <el-radio label="男"></el-radio>
      <el-radio label="女"></el-radio>
    </el-radio-group>
  </el-form-item>

    
   <el-form-item label="所在省：" :label-width="formLabelWidth">
          <el-select v-model="form.provinceId" placeholder="请选择省" @change="findAllCity">
            <el-option v-for="item in options1" :key="item.provinceId" :label="item.provinceName"
              :value="item.provinceId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所在市：" :label-width="formLabelWidth">
          <el-select v-model="form.cityId" placeholder="请选择市" @change="findAllCounty">
            <el-option v-for="item in options2" :key="item.cityId" :label="item.cityName" :value="item.cityId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所在县：" :label-width="formLabelWidth">
          <el-select v-model="form.countyId" placeholder="请选择县">
            <el-option v-for="item in options3" :key="item.countyId" :label="item.countyName" :value="item.countyId">
            </el-option>
          </el-select>
        </el-form-item>
    


  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即修改</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>

import {
  dofindAllProvince,
  dofindAllCity,
  dofindAllCounty,
} from '@/api/hospital/index.js';
import {findOne} from '@/api/emp/index.js';

export default {
    mounted(){
        this.updateTable();
    },
    data() {
      return {
        formLabelWidth: '180px',
        form: {},
        options1: [],
        options2: [],
        options3: [],
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      updateTable(){
        findOne().then(r=>{
          this.form=r.data;
        })
        dofindAllProvince().then(r=>{
            this.options1=r.data;
        });
      },
      findAllCity(){
        dofindAllCity(this.form.provinceId).then((r) => {
        this.options2 = r.data;
      });
      },
      findAllCounty(){
        this.options3 = [];
        dofindAllCounty(this.form.cityId).then((r) => {
            this.options3 = r.data;
        });
      }
    }
}
</script>

<style scoped>
.show-info {
    margin-left: 35%;
    margin-top: 70px;
  display: flex;
  text-align: center;
}
.show-info .el-input {
  width: 400px;
}
</style>